<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mo.js实例</title>

</head>

<style>
    body {
        text-align: center;
        padding: 300px;
    }

    .demo {
        width: 500px;
        height: 500px;
        position: relative;
        margin: 0 auto;
        background: #ddd;
    }
</style>

<body>

    <div class="demo">一个简单例子</div>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/mo-js/0.288.2/mo.min.js"></script>
    <script>

        var molinkEl = document.querySelector('.demo'),
            moTimeline = new mojs.Timeline(),
            moburst1 = new mojs.Burst({
                parent: molinkEl,
                duration: 1300,
                shape: 'circle',
                fill: ['#988ADE'],
                x: '0%',
                y: '-50%',
                radius: { 0: 60 },
                count: 6,
                isRunLess: true,
                repeat: 999,
                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
            }),
            moburst2 = new mojs.Burst({
                parent: molinkEl,
                duration: 1600,
                delay: 100,
                shape: 'circle',
                fill: ['#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE'],
                x: '-400%',
                y: '-420%',
                radius: { 0: 120 },
                count: 14,
                isRunLess: true,
                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
            }),
            moburst3 = new mojs.Burst({
                parent: molinkEl,
                duration: 1500,
                delay: 200,
                shape: 'circle',
                fill: ['#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE'],
                x: '130%',
                y: '-70%',
                radius: { 0: 90 },
                count: 8,
                isRunLess: true,
                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
            }),
            moburst4 = new mojs.Burst({
                parent: molinkEl,
                duration: 2000,
                delay: 300,
                shape: 'circle',
                fill: ['#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE'],
                x: '-20%',
                y: '-150%',
                radius: { 0: 60 },
                count: 14,
                isRunLess: true,
                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
            }),
            moburst5 = new mojs.Burst({
                parent: molinkEl,
                duration: 1400,
                delay: 400,
                shape: 'circle',
                fill: ['#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE'],
                x: '30%',
                y: '-100%',
                radius: { 0: 60 },
                count: 12,
                isRunLess: true,
                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
            });

        moTimeline.add(moburst1, moburst2, moburst3, moburst4, moburst5).play();

    </script>


</body>

</html>